<%@ page language="java" isELIgnored="false" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>

       <html>
       <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <title>Insert title here</title>
       </head>
       <body>
              <h1>简历列表</h1>
              <table>
                     <thead>
                            <tr align="left">
                                   <th style="width: 25%">地址</th>
                                   <th style="width: 25%">姓名</th>
                                   <th style="width: 25%">手机</th>
                                   <th style="width: 25%">操作区</th>
                            </tr>
                     </thead>
                     <tbody id="resumeList">
                     </tbody>
              </table>

              <div style="margin-top: 50px;" id="optDiv">
                     <span>操作区</span><br>
                     <span>地址</span><input id="name" type="text"><br>
                     <span>姓名</span><input id="address" type="text"><br>
                     <span>手机</span><input id="phone" type="text"><br>
                     <input type="hidden" id="id">
                     <input type="button" value="清空" onclick="clearOptDiv()">&nbsp;<input type="button" id="saveBtn" value="新增" onclick="saveResume()"/>
              </div>

              <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
              <script type="text/javascript">

                  $(function () {
                      getResumeList();
                  })

                  function getResumeList() {

                      $.ajax({
                          url: '/resume/list',
                          type: 'post',
                          async:false,
                          data:{

                          },
                          timeout:5000,
                          success:function (data) {
                              //有错就抛错
                              if(data.status=="0"){
                                  alert(data.message);return;
                              }

                              var resumeListHtml = "";
                              $.each(data, function(i, value){
                                  var index = i+1;
                                  resumeListHtml+="<tr>";
                                  resumeListHtml+="<td>"+value.name+"</td>";
                                  resumeListHtml+="<td>"+value.address+"</td>";
                                  resumeListHtml+="<td>"+value.phone+"</td>";
                                  resumeListHtml+="<td><input type='button' value='编辑' onclick='openOptDiv(\""+value.id+"\",\""+value.name+"\",\""+value.address+"\",\""+value.phone+"\")'/>&nbsp;<input type='button'value='删除' onclick='deleteResume("+value.id+")'/></td>";
                                  resumeListHtml+="</tr>";
                              })
                              $("#resumeList").empty().append(resumeListHtml);
                          },
                      })
                  }

                  function openOptDiv(id,name,address,phone){
                      $("#id").val(id);
                      $("#name").val(name);
                      $("#address").val(address);
                      $("#phone").val(phone);
                      $("#optDiv #saveBtn").val("保存编辑");
                  }

                  function saveResume(id,name,address,phone){
                      var id = $("#id").val();
                      var name = $("#name").val();
                      var address = $("#address").val();
                      var phone = $("#phone").val();

                      $.ajax({
                          url: '/resume/save',
                          type: 'post',
                          async: false,
                          data: {
                              id:id,
                              name:name,
                              address:address,
                              phone:phone,
                          },
                          timeout: 5000,
                          success: function (data) {
                              //有错就抛错
                              if (data.status == "0") {
                                  alert(data.message);
                                  return;
                              }

                              getResumeList();
                              clearOptDiv();
                          }
                      })
                  }

                  function deleteResume(id){
                      $.ajax({
                          url: '/resume/delete',
                          type: 'post',
                          async: false,
                          data: {
                              id:id,
                          },
                          timeout: 5000,
                          success: function (data) {
                              //有错就抛错
                              if (data.status == "0") {
                                  alert(data.message);
                                  return;
                              }

                              getResumeList();
                              clearOptDiv();
                          }
                      })
                  }

                  function clearOptDiv(){
                      $("#optDiv :input").not("input:button").val("");
                      $("#optDiv #saveBtn").val("新增");
                  }


              </script>

       </body>
       </html>